<template>
    <div class="newDepartment">
        <div class="crumbs">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="el-icon-folder" style="margin-right:10px"></i>事业部管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>账号管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!-- <el-button
                    type="primary"
                    icon="el-icon-delete"
                    class="handle-del mr10"
                    @click="delAllSelection"
                >批量删除</el-button>-->
                <div class="title">事业部管理</div>
                <el-button
                    type="primary"
                    class="titleBtn"
                    icon="el-icon-plus"
                    @click="add"
                    style="margin-right:30px;width:90px"
                >新建</el-button>
                <el-button
                    type="primary"
                    class="titleBtn1"
                    style="margin-right:39px;width:90px;"
                    @click="tableToExcel"
                >导出</el-button>
                <!-- <div class="prjectName mr20">
                    <span class="name">项目名称</span><el-input class="handle-select mr10" v-model="form.name"></el-input>
                </div>
                <div class="department mr20">
                    <span class="name">所属事业部</span>
                    <el-select v-model="query.address" placeholder="请选择" class="handle-select mr10">
                        <el-option key="1" label="广东省" value="广东省"></el-option>
                        <el-option key="2" label="湖南省" value="湖南省"></el-option>
                    </el-select>
                </div>-->
                <!-- <div class="stateTime mr20">
                    <span class="name">开始时间</span>
                    <el-date-picker class="handle-select" v-model="query.date" type="date" placeholder="请选择"> </el-date-picker>
                </div>-->
            </div>
            <el-table
                :data="tableData"
                border
                stripe
                class="table"
                ref="multipleTable"
                text-align="center"
                header-cell-class-name="table-header"
            >
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column show-overflow-tooltip label="序号" type="index" width="254" ></el-table-column>
                <el-table-column  prop="deptid" label="事业部ID" :show-overflow-tooltip="true" align="center" width="512"></el-table-column>
                <el-table-column  prop="deptname" label="事业部名称" :show-overflow-tooltip="true" align="center" width="387"></el-table-column>
                <el-table-column prop="password" label="操作"  align="center" width="345" >
                    <template slot-scope="scope">
                        <el-button type="text" @click="resetPassWord(scope.row)">重置密码</el-button>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text"  @click="handleEdit(scope.$index, scope.row)">产值信息表</el-button>
                        <el-button type="text"  @click="handleDelete(scope.$index, scope.row)"
                            >细化分解表</el-button
                        >
                    </template>
                </el-table-column>-->
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout=" prev, pager, next"
                    :current-page="query.page"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <!-- <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="用户名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>-->
        <!-- 点击新建 -->
        <el-dialog title="新建事业部" :visible.sync="addVisible" width="590px" >
            <el-form
                class="newForm"
                ref="form"
                :model="form"
                label-position="left"
                label-width="100px"
            >
                <el-form-item label="事业部ID" style="height:62px">
                    <el-input
                        :placeholder="form.deptid"
                        class="newFormInput"
                        v-model="form.deptid"
                        disabled
                    ></el-input>
                </el-form-item>
                <el-form-item label="事业部名称" style="height:62px">
                    <el-input placeholder="请输入" class="newFormInput" v-model="form.deptname" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" style="height:62px">
                    <el-input
                        placeholder="123456"
                        class="newFormInput"
                        v-model="form.password"
                        disabled
                    ></el-input>
                </el-form-item>
            </el-form>
            <div class="tableBtnBox" style="margin:40px 0 30px;margin-top:70px;margin-bottom:49px;">
                <button class="btn1" @click="addVisible=false">取消</button>
                <button class="btn2" @click="addConfirm">确认</button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { fetchData, getdepList, addDept, resetPassword,findDeptAll,createDeptId } from '../../api/index.js';
export default {
    name: 'basetable',
    data() {
        return {
            query: {
                userid: localStorage.getItem('userid'),
                page: 1,
                pageSize: 10
            },
            form: {
                deptid: '',
                deptname:'',
                password:'123456',
            },
            pageSize: 10,
            pageTotal: 0,
            value1: '',
            tableData: [],
            tableData1:[],
            multipleSelection: [],
            delList: [],
            addVisible: false,
            idx: -1,
            id: -1
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            getdepList(this.query).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    if (res.result.deptList) {
                        this.tableData = res.result.deptList;
                        this.query.page = res.result.pageInfo.current;
                        this.pageTotal = res.result.pageInfo.total;
                        let number=res.result.pageInfo.total > 9? res.result.pageInfo.total + 1 : '0' + (res.result.pageInfo.total + 1);
                        // this.form.deptid ='ZJZY' + number;
                    } else {
                        this.tableData = [];
                        this.query.page = 0;
                        this.pageTotal = 0;
                        // this.form.deptid = 'ZJZY01';
                    }
                } else {
                    this.tableData = [];
                    this.query.page = 0;
                    this.pageTotal = 0;
                    // this.form.deptid = 'ZJZY01';
                }
            });
        },
        //获取所有导出的数据
        getDeptAll(){
            findDeptAll().then(res => {
                console.log(res);
                 if (res.code == 200) {
                     this.tableData1 = res.result;
                     console.log(this.tableData1)
                     this.getdaochu();
                }
            })
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },

        // delAllSelection() {
        //     const length = this.multipleSelection.length;
        //     let str = '';
        //     this.delList = this.delList.concat(this.multipleSelection);
        //     for (let i = 0; i < length; i++) {
        //         str += this.multipleSelection[i].name + ' ';
        //     }
        //     this.$message.error(`删除了${str}`);
        //     this.multipleSelection = [];
        // },
        // 编辑操作
        // handleEdit(index, row) {
        //     this.idx = index;
        //     this.form = row;
        //     this.editVisible = true;
        // },
        add() {
            createDeptId().then(res=>{
                if(res.code==200){
                    this.form.deptid =res.result;
                    this.addVisible = true;
                }
            })
            
        },
        // 保存编辑
        // saveEdit() {
        //     this.editVisible = false;
        //     this.$message.success(`修改第 ${this.idx + 1} 行成功`);
        //     this.$set(this.tableData, this.idx, this.form);
        // },
        // 分页导航
        handlePageChange(val) {
            this.query.page = val;
            this.getData();
        },
        //点击重置
        reset() {
            this.form.name = '';
            this.query.address = '';
            this.query.date = '';
        },
        //新建点击确认
        addConfirm() {
           let form ={
                 deptid: this.form.deptid,
                deptname:this.form.deptname,
                password:this.$md5(this.form.password),
           }
            addDept(form).then(res => {
                if (res.code === 200) {  
            
                    this.$message.success('创建成功');
                    this.form.deptname = '';
                    this.getData();
                     this.addVisible = false;
                
                }else{
                      this.$message.error(res.message);
                }
                
            });
        },
        //点击导出
        tableToExcel() {
            //列标题
            this.getDeptAll();
            console.log(this.tableData1);
            
           
        },
        getdaochu(){
            this.tableData1.filter((item,index)=>{
                let x= item.deptid;
                let y =item.deptname
                 item.id = index+1;
                 item.deptid = item.id;
                 item.deptname = x;
                 item.id = y;
                // item.coefficient =0.2
                // Object.keys(item).forEach(key=>{
                //     if(!item[key]&&item[key]!==0){
                //         state=false
                //         return state
                //     }
                // })
                
            })
             //列标题，逗号隔开，每一个逗号就是隔开一个单元格
            let str = `序号,事业部ID,事业部名称\n`;
            //增加\t为了不让表格显示科学计数法或者其他格式
            for (let i = 0; i < this.tableData1.length; i++) {
                for (let item in this.tableData1[i]) {
                    str += `${this.tableData1[i][item] + '\t'},`;
                }
                str += '\n';
            }
            //encodeURIComponent解决中文乱码
            let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
            //通过创建a标签实现
            let link = document.createElement('a');
            link.href = uri;
            //对下载的文件命名
            link.download = '账号管理数据表.csv';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        },
        //重置密码
        resetPassWord(scope) {
            this.$confirm('是否确认恢复默认密码"123456"？', {
                customClass: 'newObjectConfirm',
                center: true,
                showClose:false,
                cancelButtonClass: 'newObjectCancel',
                confirmButtonClass: 'newObjectConfirm'
            })
                .then(() => {
                    resetPassword({ username: scope.deptid }).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '重置成功'
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '重置失败'
                            });
                        }
                    });
                })
                .catch(() => {});
        }
    }
};
</script>

<style scoped lang="scss">
.handle-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.title {
    height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    margin-right: 80px;
    min-width: 120px;
}
.titleBtn {
    width: 90px;
    height: 35px;
    background: rgba(33, 74, 143, 1);
    color: #fff;
    border: none;
     font-size: 16px;
     border-radius:5px;
}
.titleBtn1 {
    width: 90px;
    height: 35px;
    background: rgba(0, 79, 171, 0.2);
    color: rgba(0, 79, 171, 1);
    border: none;
     font-size: 16px;
     border-radius:5px;

}
.handle-box .name {
    margin-right: 10px;
}
.mr20 {
    margin-right: 30px;
    min-width: 240px;
}
.handle-select {
    width: 140px;
}
.searchBox {
    min-width: 240px;
    margin-left: auto;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.title {
    float: left;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.newForm {
   
    .el-form-item {
        border-bottom: 1px solid #d8d8d8;
        margin-bottom: 0;
    }
    .newFormInput/deep/.el-input__inner {
        border: none;
        width: 450px;
        height: 62px;
        line-height: 62px;
    }
    /deep/.el-form-item__label{
        font-size:16px;
        padding:0;
        line-height: 62px;
    }
}
.newDepartment/deep/.el-dialog__body {
    max-height: 400px;
    margin-top:16px;
    // padding-top:155px!important;
    overflow-y: scroll;
    position: relative;
}
.tableBtnBox {
    text-align: center;
    .btn1 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 0.2);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 79, 171, 1);
        margin-right: 56px;
    }
    .btn2 {
        width: 90px;
        height: 35px;
        background: rgba(0, 79, 171, 1);
        border-radius: 5px;
        border: none;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
    /deep/.el-input.is-disabled > .el-input__inner {
        background: #fff !important;
        
    }
}
.newObjectConfirm {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 28px;
    background: rgba(0, 79, 171, 1) !important;
}
.newObjectCancel {
    width: 90px !important;
    height: 35px;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 5px;
}
.newForm/deep/.el-input__inner {
    font-size:16px;
}



</style>
